<template>
<div class="news">

  <div class="news-main">

    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>信息描述</span>
      </div>
    <el-row :gutter="10" class="top">
     <el-col :span="8" class="textbox">
       <div class="tit">标题:</div>
       <el-input v-model="xyNews.title" placeholder="请输入文章标题"></el-input>
     </el-col>
      <el-col :span="8" class="textbox">
        <div class="tit">作者:</div>
        <el-input v-model="xyNews.author"  placeholder="请输入作者"></el-input>

      </el-col>
      <el-col class="check"  :span="3" :offset="3">
        <el-button type="primary" @click="doUpdata">提交文章</el-button>
      </el-col>
    </el-row>

      <el-row :gutter="10" class="mid">
       <el-col :span="12" class="desc">
         <div class="tit">内容描述:</div>
         <el-input type="textarea" v-model="xyNews.desc" placeholder="请输入文章描述" max="300"></el-input>
       </el-col>
        <el-col :span="6" class="hot">
            <div class="hot-main">
              <svg-icon icon-class="fiare" />
              <el-radio v-model="xyNews.hot" label="0"> HOT</el-radio>
              <el-radio v-model="xyNews.hot" label="1">COOL</el-radio>
            </div>



        </el-col>
      </el-row>
      <el-row :gutter="10" class="coverImg">
       <el-col :span="2" class="text">文章封面:</el-col>
        <el-col :span="3" class="uplod">
          <el-upload
              class="upload-demo"
              :action="`${host}/admin/xy/upload/uploadImg`"
              multiple
              :limit="3"
              :on-progress:="startUp"
              :on-success="upSuccess"
              :show-file-list="false"
          >
            <el-button size="small" type="primary" :loading="showloding">
              <span v-show="showloding">上传中</span><span v-show="showloding">点击上传</span>
              点击上传
            </el-button>
          </el-upload>
        </el-col>
        <el-col :span="4" class="cover">
          <img :src="cover" alt="">
        </el-col>
      </el-row>
<!--      文本编辑器的选择及素材库的选择-->
      <el-row :gutter="10" class="edit">
       <el-col :span="6">
         <span>文本编辑器选择</span>
         <el-radio v-model="xyNews.type" label="0">富文本</el-radio>
         <el-radio v-model="xyNews.type" label="1">MarkDown</el-radio>

       </el-col>
      </el-row>

      <el-row :gutter="10" class="save">
        <el-col :span="2" >
          <!--         获取输入内容并保存-->
          <el-button type="primary" class="save" @click="saveText">保存文本</el-button>
        </el-col>
<!--        打开素材弹窗-->
        <el-col :span="2"  v-if="xyNews.type == 1">
          <!--         获取输入内容并保存-->
          <el-button type="primary" class="save" @click="openStory" >添加素材</el-button>
        </el-col>

      </el-row>
      <!--      富文本编辑器-->
      <el-row :gutter="10" v-if="xyNews.type == 0">
        <el-col :span="2"></el-col>
       <el-col :span="24">
         <tiny-mce ref="tin" :uploadurl="uploadUrl"></tiny-mce>
       </el-col>
      </el-row>
<!--      makdown文本编辑器-->
      <el-row :gutter="10" v-else>
       <el-col :span="24">
        <mark-down ref="md" class="markdown" ></mark-down>
       </el-col>
      </el-row>
    </el-card>

  </div>

  <!-- 自定义弹窗 显示素材库 -->
  <picturestory ref="material" :texttyp="texttype" />
</div>

</template>

<script>
import host from '@/settings'


import TinyMce from '@/components/Tinymce'
import MarkDown from '@/components/MarkdownEditor'
import picturestory from '@/components/picturestory/PictureStore'

import newsapi from '@/api/material/newsapi'

export default {
  components:{
  TinyMce,
    MarkDown,

    picturestory
  },
data(){
return{
  dialog: false, // 素材库弹窗
  texttype:'1',
  xyNews:{
    hot:'0',
    type:'0'
  },
  host:host.host,
  showloding:false,
  // 请求的图片资源
  cover:"",
  //上传路径
  uploadUrl: 'http://www.bufantec.com/admin/xy/upload/uploadImg',

}

},
methods:{
  doUpdata(){
    //上传文章
    this.xyNews.cover = this.cover;
      let xyNews  = this.xyNews
      let flag ;
      if(this.id){
        flag = newsapi.updateNews;
      }else {
        flag = newsapi.saveNews;
      }
    flag({ xyNews })
    .then(res=>{
      console.log(res)
      if (res.code == 'success'){
        this.$router.go(-1)
      }
    })
  },
  // 开始上传的钩子
  startUp(){
    this.showloding=true;
  },
  // 上传成功的钩子函数
  upSuccess(response, file, fileList){
    this.showloding=false;
    console.log(file)
    // 长传封面后的地址
    this.cover = this.host+"/"+file.response.url;
    this.$message('上传成功')
  },
  //获取内容并保存
  saveText(){
    // 获取富文本转码的html
    if (this.xyNews.type == 0){
      let val = this.$refs.tin.getContent()

      this.xyNews.content2 = val
      this.xyNews.content1 = ''

    }else if(this.xyNews.type == 1) {
      let htm = this.$refs.md.getHtml()
      let  val = this.$refs.md.getValue()
      this.xyNews.content1 = val;
      this.xyNews.content2 = htm;
    }

    //获取makedown文本内容保存
  },
  //获取文章详情
  getNeslist(id){

    newsapi.detailNews({
      id
    })
    .then(res=>{
      console.log(res)
      this.xyNews = res.data;
      this.cover = res.data.cover
      this.$nextTick(()=>{
        if(this.xyNews.type == 0){

          this.$refs.tin.setContent(res.data.content2)
        }else if (this.xyNews.type == 1){
          this.$refs.md.setValue(res.data.content1)
        }
      })

    })
  },
  // 打开素材库弹窗
  openStory() {
    // this.dialog = true
    console.log(111)

    this.$refs.material.openDialog()
  }

},
  created(){

    let id = this.$route.params.id;
    if(id){
      this.xyNews.id = id;
      this.getNeslist(id)
    }

  }
}
</script>

<style lang="scss" scoped>
.news{
  .news-main{
    width: 90%;
    margin: 20px auto;
    .box-card{
      .top{
        .textbox{
          display: flex;
          .tit{
            width: 50px;
            line-height: 40px;
            font-weight: bolder;
          }
        }

      }
      .mid{
        margin-top: 30px;
        .desc{
          display: flex;
          .tit{
            width: 80px;
            line-height: 50px;
            font-weight: bolder;
            margin-right: 5px;
            .hot{

              ::v-deep .el-col-6{
                height: 50px;
                display: flex;

              }
              .hot-main{
                ::v-deep.el-radio{
                  margin-top: 20px;
                }



              }
            }

          }
        }
      }

    }
    .coverImg{
      margin-top: 30px;
      font-weight: bolder;

      .text{
        height: 40px;
        line-height: 40px;
      }
      .uplod{
        margin-left: -30px;
      }
      .cover{
        img{
          width: 110px;
          height: 120px;
        }
      }
    }
    .edit{
      margin-top: 30px;
      span{
        margin-right: 10px;

      }
    }
    .save{
      margin-bottom: 5px;
    }
    .markdown{
      // https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E5%AD%90%E7%BB%84%E4%BB%B6%E7%9A%84%E6%A0%B9%E5%85%83%E7%B4%A0
      ::v-deep  .tui-editor .te-md-splitter{
        width: 100%;
      }
    }

  }
}
</style>
